import { CopyOutlined } from "@ant-design/icons"
import { Button } from "antd"
import dayjs from "dayjs"
import { useSelector } from "react-redux"

import TooltipText from "@/components/common/tooltipText"
import { Toast } from "@/components/messages"
import { AppState } from "@/stores"
import { getWidth } from "@/utils/util"

import { useLocale } from ".."
import { useNumber } from "./use-number"

const useDigital = () => {
	const { newFormat } = useLocale()
	const { currency } = useSelector((state: AppState) => state.config)
	const renderPercentage = (value?: number | string) => {
		return value + "%"
	}
	const { locale } = useSelector((state: AppState) => state.global)
	const renderColor = (value?: number | string) => {
		const type = 0
		const { formatedValue, getStyle } = useNumber({
			value,
			currency: currency.symbol,
			colorful: true,
			precision: 2,
			notNumber: 0
		})
		return <span style={getStyle(value, type)}>{formatedValue}</span>
	}
	const renderButton = (onClick: (value: number | string, record?: any) => void, noNumber?: boolean) => {
		// eslint-disable-next-line react/display-name
		return (value: number | string, record: any) => {
			const type = 1
			const { formatedValue, getStyle } = useNumber({ value, currency: currency.symbol, precision: 2, notNumber: 0 })
			return (
				<Button type="text" style={getStyle(value, type)} onClick={() => onClick(value, record)}>
					{noNumber ? value : formatedValue}
				</Button>
			)
		}
	}
	const renderFormat = (value?: number | string) => {
		const type = 0
		const { formatedValue, getStyle } = useNumber({ value, currency: currency.symbol, precision: 2, notNumber: 0 })
		return <span style={getStyle(value, type)}>{formatedValue}</span>
	}

	const renderTooltip = (text: string) => <TooltipText text={text} width={100} />

	const renderFormatWithCurrency = (value?: number | string, currencyStr?: "" | "$" | "￥") => {
		const type = 0
		const { formatedValue, getStyle } = useNumber({ value, currency: currencyStr, precision: 2, notNumber: 0 })
		return <span style={getStyle(value, type)}>{formatedValue}</span>
	}

	const renderCopyNo = (text: string) => {
		return text ? (
			<div>
				{text}{" "}
				<span
					onClick={() => {
						navigator.clipboard.writeText(String(text))
						Toast.success(newFormat("tips.copyDone"))
					}}
					className="csp"
				>
					<CopyOutlined />
				</span>
			</div>
		) : (
			"-"
		)
	}
	const formatTime = (seconds: number) => {
		const h = Math.floor(seconds / 3600)
		const m = Math.floor((seconds % 3600) / 60)
		const s = seconds % 60

		const timeParts = []
		if (h > 0) {
			timeParts.push(`${h}h`)
		}
		if (m > 0) {
			timeParts.push(`${m}m`)
		}
		if (s > 0) {
			timeParts.push(`${s}s`)
		}

		return timeParts.join("").trim()
	}
	const renderSlash = (text: any) => text || "-"
	const getFormateDate = (date: number, type = "ymd") => {
		let format = "YYYY-MM-DD"
		if (type === "ym") {
			format = "YYYY-MM"
		}
		return date ? dayjs(String(date)).format(format) : "-"
	}
	const formatTwoDecimalFull = (num: number | string) => {
		if (num === "") {
			return ""
		}
		const result = Number((num || 0).toString().match(/^\d+(?:\.\d{0,2})?/))
		let s_x = result.toString()
		let pos_decimal = s_x.indexOf(".")
		if (pos_decimal < 0) {
			pos_decimal = s_x.length
			s_x += "."
		}
		while (s_x.length <= pos_decimal + 2) {
			s_x += "0"
		}
		return s_x
	}

	const getWidthWithCurrentLocale = (value: number | string, scale?: number) => {
		return scale ? getWidth(locale, value, scale) : getWidth(locale, value)
	}

	return {
		renderPercentage,
		renderColor,
		renderButton,
		renderFormat,
		renderCopyNo,
		renderFormatWithCurrency,
		formatTime,
		getFormateDate,
		renderSlash,
		renderTooltip,
		formatTwoDecimalFull,
		getWidthWithCurrentLocale
	}
}
export default useDigital
